<!-- 设置商品名称显示样式 -->
<template>
  <div class="mod-config">
      <el-form>
        <el-row class="bg-row" style="margin-bottom: 2px;" v-for="(item,index) in ctgList" :key="index">
          <el-form-item :label="item.title" label-width="180px">
            <span>
              <el-checkbox :value="item.name == '1'" :true-label="1" :false-label="0" disabled @change="valueChangeHandle('name',item.name,index)">商品名称</el-checkbox> +
            </span>
            <span v-if="item.ctgId == '3' || item.ctgId == '4' || item.ctgId == '8' || item.ctgId == '14'">
              <el-checkbox :value="item.mirrorBall == '1'" :true-label="1" :false-label="0" @change="valueChangeHandle('mirrorBall',item.mirrorBall,index)">球镜</el-checkbox> +
            </span>
            <span v-if="item.ctgId == '3' || item.ctgId == '4' || item.ctgId == '14'">
              <el-checkbox :value="item.columnMirror == '1'" :true-label="1" :false-label="0" @change="valueChangeHandle('columnMirror',item.columnMirror,index)">柱镜</el-checkbox> +
            </span>
            <span v-if="item.ctgId == '1' || item.ctgId == '6'">
              <el-checkbox :value="item.manufacturerSpec == '1'" :true-label="1" :false-label="0" @change="valueChangeHandle('manufacturerSpec',item.manufacturerSpec,index)">厂家型号</el-checkbox> +
            </span>
            <span v-if="item.ctgId != '3' && item.ctgId != '4' && item.ctgId != '14'">
              <el-checkbox :value="item.spec == '1'" :true-label="1" :false-label="0" @change="valueChangeHandle('spec',item.spec,index)">型号</el-checkbox> +
            </span>
            <span v-if="item.ctgId == '1' || item.ctgId == '6'">
              <el-checkbox :value="item.manufacturerColorNumber == '1'" :true-label="1" :false-label="0" @change="valueChangeHandle('manufacturerColorNumber',item.manufacturerColorNumber,index)">厂家色号</el-checkbox> +
            </span>
            <span v-if="item.ctgId == '1' || item.ctgId == '6'">
              <el-checkbox :value="item.color == '1'" :true-label="1" :false-label="0" @change="valueChangeHandle('color',item.color,index)">色号</el-checkbox> +
            </span>
            <span v-if="item.ctgId == '1' || item.ctgId == '4' || item.ctgId == '6' || item.ctgId == '14'">
              <el-checkbox :value="item.chineseColor == '1'" :true-label="1" :false-label="0" @change="valueChangeHandle('chineseColor',item.chineseColor,index)">颜色</el-checkbox> +
            </span>
            <span v-if="item.ctgId == '1'">
              <el-checkbox :value="item.frameMaterial == '1'" :true-label="1" :false-label="0" @change="valueChangeHandle('frameMaterial',item.frameMaterial,index)">材质</el-checkbox> +
            </span>
            <span>
              <el-checkbox :value="item.price == '1'" :true-label="1" :false-label="0" @change="valueChangeHandle('price',item.price,index)">标准零售价</el-checkbox>
            </span>
            <span v-if="item.ctgId == '1' || item.ctgId == '6' || item.ctgId == '8'">
              + <el-checkbox :value="item.goodsSize == '1'" :true-label="1" :false-label="0" @change="valueChangeHandle('goodsSize',item.goodsSize,index)">尺寸</el-checkbox>
            </span>
          </el-form-item>
        </el-row>
      </el-form>
      <el-row>
        <el-button type="primary" @click="save" v-prevent-re-click>保 存</el-button>
      </el-row>
  </div>
</template>

<script>
  import { getNameShowStyleList, saveGoodsNameBatch } from '@/api/eims/basicInfo/showNameSetting/showNameSetting'

  import {mapGetters} from 'vuex'
  export default {
    data () {
      return {
        checked: 1,
        ctgList: [],
        dataForm: {},
        list: [
          {ctgId: '1' , title: '镜架商品名称显示样式'},
          {ctgId: '2' , title: '配件商品名称显示样式'},
          {ctgId: '3' , title: '镜片商品名称显示样式'},
          {ctgId: '4' , title: '隐形镜片商品名称显示样式'},
          {ctgId: '5' , title: '护理液商品名称显示样式'},
          {ctgId: '6' , title: '太阳镜商品名称显示样式'},
          {ctgId: '7' , title: '耗材商品名称显示样式'},
          {ctgId: '8' , title: '老花镜商品名称显示样式'},
          {ctgId: '9' , title: '视光商品名称显示样式'},
          {ctgId: '14' , title: '试戴片商品名称显示样式'},
        ]
      }
    },
    created () {
      this.getDataList()
    },
    computed: {
      ...mapGetters(['permissions','userInfo','bizData'])
    },
    methods: {
      // 获取数据列表
      getDataList () {
        getNameShowStyleList().then(response => {
          if(response.data.code == '0'){
            this.ctgList = response.data.data
            this.ctgList.forEach(item => {
              for(let i = 0; i < this.list.length; i++){
                if(item.ctgId == this.list[i].ctgId){
                  item.title = this.list[i].title
                }
              }
            })
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      valueChangeHandle(name,val,idx){
        if(val == '1'){
          this.$set(this.ctgList[idx],name,'0')
        }else{
          this.$set(this.ctgList[idx],name,'1')
        }
        this.ctgList = [...this.ctgList]
      },
      save() {
        saveGoodsNameBatch(this.ctgList).then(response => {
          if(response.data.code == '0'){
            this.$message.success('保存成功')
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .el-checkbox {
    margin: 0 5px!important;
  }
</style>
